<template>
<!--  <h1>设备管理</h1>-->
  <br>
  <div align="left">
    <vxe-input v-model="搜索设备的名称" placeholder="搜索设备名称"  @keypress.native.enter="刷新数据(搜索设备的名称)"></vxe-input>
    <button type="button" class="layui-btn layui-btn-sm" @click="刷新数据(搜索设备的名称)">搜索</button>
  </div>
  <div align="left">
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="刷新当前页" v-loading="加载中"><i class="layui-icon layui-icon-refresh"></i>刷新当前页</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="删除选中设备">(批量)删除设备</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="解绑选中设备">(批量)删除(设备对应的账号)</button>
    <button type="button" class="layui-btn layui-btn-sm" @click="分配账号">(批量)分配账号</button>
    <button type="button" class="layui-btn layui-btn-sm" @click="恢复">(批量)恢复状态</button>
    <button type="button" class="layui-btn layui-btn-sm" @click="重置日常">重置日常完成</button>
  </div>

  <vxe-pager background v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
             v-model:total="page.totalResult"
             :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
             @page-change='刷新数据(搜索设备的名称,"分页")'>
    <template #right>
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
    </template>
  </vxe-pager>

  <div>
    <vxe-table size="medium" border resizable show-overflow   row-id="id"
               :edit-config="{trigger: 'click', mode: 'cell'}"
               ref="xTable"
               :data="tableData"
               @edit-closed="保存修改行" @edit-actived="记录编辑前" :loading="加载中" width="100%">
      <vxe-column type="checkbox" checked width="40"></vxe-column>
      <vxe-table-column type="seq"  title="序号" width="60" ></vxe-table-column>
      <vxe-table-column field="设备名称2" title="设备名2" width="110px"  :edit-render="{name: 'input', immediate: true}"
                        sortable></vxe-table-column>
      <vxe-table-column field="设备序列号" title="设备序列号"  width="270px" ></vxe-table-column>
      <vxe-table-column field="系统" title="系统" width="80" sortable></vxe-table-column>
      <vxe-table-column field="版本" title="版本" width="80" sortable></vxe-table-column>
      <vxe-table-column title="设备账号分配详情" width="215">
        <template #default="{row}">
          账号: <span class="befor">{{row.已选账号数量}}</span> / <span class="after">{{row.所有账号数量}}</span> 多区: <span class="befor">{{row.已选区数量}}</span> / <span class="after">{{row.所有区数量}}</span>
          <vxe-button type="text" status="success" content="查看" @click="显示账号详情(row)"></vxe-button>
        </template>

      </vxe-table-column>
      <vxe-table-column field="已完成" title="日常完成率" width="120px" sortable>
        <template #default="{row}">
          <p v-if="row.已完成==0&&row.已选区数量==0">0.00%</p>
          <p v-if="row.已完成!=0||row.已选区数量!=0">{{ (((parseInt(row.已完成)/parseInt(row.已选区数量))*100)).toFixed(2)}}%</p>
        </template>
      </vxe-table-column>

      <vxe-table-column field="实时ip" title="实时ip" width="170px" sortable></vxe-table-column>
      <vxe-table-column field="创建时间" title="创建时间" width="160" :formatter="formatTime" sortable></vxe-table-column>
      <vxe-table-column field="备注" title="备注" :edit-render="{name: 'input', immediate: true}"></vxe-table-column>
      <!-- <vxe-table-column title="账号"> -->
      <!-- <template #default="{ row }"> -->
      <!-- <sbzhxs :tableData='row'></sbzhxs> -->
      <!-- </template> -->
      <!-- </vxe-table-column> -->
    </vxe-table>

    <vxe-modal v-model="账号详情_显示中" width="1500" show-footer :title="'当前设备序列号:'+账号详情_显示中账号" :destroy-on-close='true'
               :marginSize="-500" :mask-closable="true">
      <xssbxzh v-model:设备序列号="账号详情_显示中账号"></xssbxzh>
    </vxe-modal>

    <vxe-modal v-model="分配账号_显示中" title="分配设置" :destroy-on-close='true' :maskClosable="true" type="alert">
      <fpsz :testArr="aaaa"></fpsz>
    </vxe-modal>

    <vxe-modal v-model="恢复状态_显示中" title="自定设备恢复状态" :destroy-on-close='true' :maskClosable="true" >
      <huifu></huifu>
    </vxe-modal>

  </div>
</template>

<script>
import xssbxzh from "../components/设备管理/显示设备下账号.vue";
import fpsz from "../components/设备管理/分配设置.vue";
import huifu from "../components/设备管理/恢复状态.vue";
import XEUtils from 'xe-utils'

export default {
  components: {xssbxzh, fpsz, huifu},
  data() {
    return {
      恢复状态_显示中: false,
      分配账号_显示中: false,
      账号详情_显示中: false,
      账号详情_显示中账号: null,
      搜索设备的名称: "",
      编辑原始值: "",
      已勾选: [],
      page: {
        currentPage: 1,
        pageSize: 100,
        totalResult: 0,
      },
      tableData: [],
      加载中: true,
    };
  },
  created() {
    this.刷新数据();
  },
  methods: {
    批量操作消息提示:async function(message1,message2){
      const T=this;
      const table = this.getSelectionEvent();
      if(!table.length){
        this.$XModal.confirm({content: message1, status: 'question', maskClosable: true});
        return false;
      }
      var state=await this.$XModal.confirm(message2)
      if(state=='cancel'||state=='close'){
        return false;
      }
      T.已勾选=table;
      return table;
    },
    刷新数据: function (设备名称,来自何方) {
      let T = this;
      if(来自何方=='分页'){
        T.已勾选=[];//翻页的时候清空勾选
      }
      this.tableData = [];
      T.加载中 = true;
      this.$请求(
          "/device/list",
          {
            第几页: T.page.currentPage,
            每页显示条数: T.page.pageSize,
            设备名称: 设备名称,
          },
          function (response) {
            T.加载中 = false;
            T.tableData = response.data.data;
            T.$refs.xTable.setCheckboxRow(T.已勾选,true)
            T.page.totalResult = response.data.total;
            //T.$XModal.message({content: "刷新成功", status: "success"});
          },
          function (err) {
            console.log(err);
            T.$XModal.message({content: "搜索设备失败", status: "error"});
          }
      );
    },
    显示账号详情: function (row) {
      this.账号详情_显示中账号 = row.设备序列号;
      this.账号详情_显示中 = true;
    },
    formatTime ({ cellValue, row, column }) {
      return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },
    editClosedEvent({row, column}) {
      console.log(`${column.property} : ${row[column.property]}`);
    },
    getSelectionEvent: function () {
      const $table = this.$refs.xTable.getCheckboxRecords();
      return $table;
    },
    刷新当前页:async function(){
      this.刷新数据();
    },
    删除选中设备: async function () {
      const table = await this.批量操作消息提示('请勾选需要删除的设备','您确定要删除设备吗？')
      if(!table){
        return;
      }
      const T = this;
      let tab = [];
      for (var i = 0; i < table.length; i++) {
        tab.push(table[i].设备序列号);
      }

      this.加载中 = true;
      this.$请求(
          "/delete/devices",
          {
            设备序列号数组: JSON.stringify(tab),
          },
          function (response) {
            T.加载中 = false;
            T.$XModal.alert({content: "success 删除成功", status: "success"});
            T.刷新数据();
          },
          function (response) {
            alert("出错啦");
          }
      );
    },
    解绑选中设备: async function () {
      const table = await this.批量操作消息提示('请勾选需要删除--设备对应的账号','您确定要删除勾选设备所对应的账号吗？')
      if(!table){
        return;
      }
      const T = this;
      let tab = [];
      for (var i = 0; i < table.length; i++) {
        tab.push(table[i].设备序列号);
      }

      this.加载中 = true;
      this.$请求(
          "/dismiss/devices",
          {
            设备序列号数组: JSON.stringify(tab),
          },
          function (response) {
            T.刷新数据();
            T.$XModal.alert({content: "success 解绑成功", status: "success"});
          },
          function (response) {
            alert("出错啦");
          }
      );
    },
    分配账号: function () {
      this.分配账号_显示中 = true;
    },

    恢复: function () {
      this.恢复状态_显示中 = true;
    },

    保存打钩项: function () {
      const table = this.getSelectionEvent();
      const table2 = JSON.parse(JSON.stringify(table));
      const T = this;
      for (var i = 0, new_data = []; i < table2.length; i++) {
        delete table2[i]._XID;
      }
      this.$axios
          .post(this.$route.query.admin + "/设备修改", {
            data: JSON.stringify(table2),
          })
          .then(function (response) {
            console.log(response.data);
            T.刷新数据();
            T.$XModal.alert({content: "success 保存成功", status: "success"});
          })
          .catch(function (error) {
            alert("出错啦");
          });
    },
    导出到文档: function () {
      const $table = this.$refs.xTable;
      $table.exportData({
        data: $table.getCheckboxRecords(),
      });
    },
    记录编辑前({row,column}){
      this.编辑原始值 = row[column.property]
    },
    保存修改行({row,column}) {
      if (column) {
        if (row[column.property] == this.编辑原始值) {
          return
        }
      }
      let data = {
        设备名称2: row.设备名称2,
        备注: row.备注,
        设备序列号: row.设备序列号,
      };
      this.加载中 = true;
      let T = this;
      this.$请求("/update/device/name", data, function (obj) {
        T.加载中 = false;
        if(obj.data.code!==1){
          T.$XModal.message({content: obj.data.message, status: "error"});
          T.刷新数据();
        }
      });
    },
    重置日常: async function () {
      const table = await this.批量操作消息提示('请勾选需要重置日常的设备','您确定要重置日常?')
      if(!table){
        return;
      }
      const T = this;
      let deviceIds = [];
      for (var i = 0; i < table.length; i++) {
        deviceIds.push(table[i].设备序列号);
      }
      this.加载中 = true;
      deviceIds = JSON.stringify(deviceIds);
      T.$请求('/reset/daily', {设备序列号数组: deviceIds},  (obj)=> {
        T.加载中 = false;
        T.刷新数据();
      })
    },
  },

};
</script>


<style>
button {
  margin: 1px !important;
  border: 0px !important;
  /* padding: px !important; */

}
.befor{
  color: #67c23a;
}
.after{
  color: red;
}
</style>
